import React,{Component} from "react";
import { Steps, Form, Input, Button, message } from 'antd';
import { Link, withRouter } from 'react-router-dom';
import ajax from '../ajaxMethod';
import "../assets/stylesheets/password.css";

class PassWord extends Component{
    constructor(props){
        super(props);
        this.state = {
            getCodeState: 0,
            time: 0,
        }
    }
    // getCodeClick = (e) =>{
    //     //先检查上面的是不是对的
    //     let isOk = false;
    //     this.setState({getCodeState: 2, time: 60});
    //     for(let i = 0; i < 61; i++){
    //         setTimeout(() => {
    //             this.setState({time: this.state.time - 1});
    //         }, i * 1000);
    //     }
    //     setTimeout(() => {
    //         this.setState({getCodeState: 3});
    //     }, 60000);
    // }

    handleValidator = (rule, val, callback) =>{
        if(!val){ callback(); }
        let regEmail = new RegExp(/^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$/);
        if(!regEmail.test(val)){
            callback("请输入正确的邮箱");
            this.setState({getCodeState: 0});
        }else{
            this.setState({getCodeState: 1});
        }
    }
    handleSubmit = (e) =>{
        let values = this.props.form.getFieldsValue(),
            _this = this;

        e.preventDefault();
        ajax.postAjax("/interface/password", {account: values.account}, res =>{
            if(res.success){ //下一步
                if(res.data.state === 1){
                    message.error("邮箱不存在，请先注册");
                }else{
                    console.log("发送邮件的返回", res);
                    _this.props.history.push({
                        pathname: "/passwordSecond"
                    })
                }
            }else{
                message.error(res.description);
                console.error(res.description);
            }
        })
    }
    render(){
        const {
            getFieldDecorator, getFieldProps, getFieldsError, getFieldError, isFieldTouched,
        } = this.props.form;
        const afterfix = getFieldDecorator('getCode',{
            initialValue: "发送验证码"
        })(
            <button disabled={this.state.getCodeState % 2 === 0 || this.state.time? true: false} onClick={this.getCodeClick}>
                { !this.state.time? "获取验证码": this.state.time + " 秒" }
            </button>
        )
        const formItemLayout = {
            labelCol: {
                // span: 4,
                // offset:24
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                // span: 4,
                // offset:4
                xs: { span: 24 },
                sm: { span: 8 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 12,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        };
        return(
        <div className="password">
            <div className="top">
                <div>
                    <Link to="/"><i className="logo"></i></Link>
                    <span className="forget">忘记密码</span>
                </div>
            </div>
            <div className="content-box">
                <div className="steps">
                    <Steps current={0}>
                        <Steps.Step title="验证" description="" />
                        <Steps.Step title="发送" description="" />
                        <Steps.Step title="设置" description="" />
                    </Steps>
                </div>
                <Form onSubmit={this.handleSubmit} layout="horizontal">
                    <Form.Item
                        {...formItemLayout}
                        label="邮箱号"
                        >
                        {getFieldDecorator('account', {
                            rules: [
                                {required: true, message: '请输入邮箱' },
                                {validator: this.handleValidator}
                            ],
                        })(
                            <Input />
                        )}
                    </Form.Item>
                    <Form.Item {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit" className="login-form-button">下一步,设置信息</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>)
    }
}

export default withRouter(Form.create({})(PassWord));